<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .mask,
        .login {
            display: none;
            /* cursor: move; 移动十字架*/
        }
        
        #passport-login-pop {
            width: 356px;
            height: 410px;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 2;
        }
        
        .title {
            height: 30px;
            background-color: orange;
            position: relative;
            cursor: move;
        }
        
        .main {
            height: 380px;
            background: #abcdef;
        }
        
        .close-btn {
            position: absolute;
            right: 5px;
            top: 2px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <a href="javascript:;" id="link">登录</a>
    <div class="mask" id="TANGRAM__PSP_5__" style="position:absolute;top:0px;left:0px;width:100%;height:100%;position: fixed;  opacity: 0.5; z-index: 1; background-color: rgb(0, 0, 0);">&nbsp;</div>
    <div id="passport-login-pop" class="login">
        <div class="title">
            <div class="close-btn">X</div>
        </div>
        <div class="main"></div>
    </div>
</body>

</html>
<script>
    var link = document.querySelector('#link'); //登录按钮
    var mask = document.querySelector('#TANGRAM__PSP_5__'); //遮罩层
    var login = document.querySelector('#passport-login-pop'); //登录框
    var closeBtn = document.querySelector('.close-btn'); //关闭按钮
    var dragTitle = document.querySelector('.title'); //登录框标题



    //1.点击登录框，显示遮罩层+登录框(居中+关闭按钮)
    link.onclick = function() {
        mask.style.display = 'block';
        login.style.display = 'block';
        login.style.left = (document.documentElement.clientWidth - login.offsetWidth) / 2 + 'px';
        login.style.top = (document.documentElement.clientHeight - login.offsetHeight) / 2 + 'px';
    };

    //2.缩放窗口，盒子居中。
    window.onresize = function() {
        var showHide = window.getComputedStyle(login)['display'];
        //当前的登录框是否显示。显示才设置居中
        if (showHide === 'block') {
            login.style.left = (document.documentElement.clientWidth - login.offsetWidth) / 2 + 'px';
            login.style.top = (document.documentElement.clientHeight - login.offsetHeight) / 2 + 'px';
        }
    }

    closeBtn.onclick = function() {
        mask.style.display = 'none';
        login.style.display = 'none';
    }

    //2.登录框可以被拖拽+限定范围
    //通过点击标题控制整个login盒子被拖拽
    dragTitle.onmousedown = function(ev) {
        var ev = ev || window.event;
        //求不变的短线。
        var shortx = ev.offsetX;
        var shorty = ev.offsetY;
        document.onmousemove = function(ev) {
            var ev = ev || window.event;
            //限定范围
            var left = ev.clientX - shortx;
            var top = ev.clientY - shorty;
            if (left <= 0) {
                left = 0;
            } else if (left >= document.documentElement.clientWidth - login.offsetWidth) {
                left = document.documentElement.clientWidth - login.offsetWidth
            }

            if (top <= 0) {
                top = 0;
            } else if (top >= document.documentElement.clientHeight - login.offsetHeight) {
                top = document.documentElement.clientHeight - login.offsetHeight
            }

            login.style.left = left + 'px';
            login.style.top = top + 'px';
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
</script>